  <div class="container-xl">
    <!-- Page title -->
    <div class="page-header d-print-none">
      <div class="row align-items-center">
        <div class="col">
          <h2 class="page-title">
            正在下载
          </h2>
        </div>
      </div>
    </div>
  </div>
  {% if DownloadCount > 0 %}
  <div class="page-body">
    <div class="container-xl">
      <div class="row row-cards">
        {% for Torrent in Torrents %}
        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-3">
                  <img src="{{ Torrent.image }}" class="rounded">
                </div>
                <div class="col">
                  <h3 class="card-title mb-1">
                    <a class="text-reset">{{ Torrent.title }}</a>
                  </h3>
                  <div class="text-muted" id="speed_text_{{ Torrent.id }}">
                    {{ Torrent.speed }}
                  </div>
                  <div class="mt-3">
                    <div class="row g-2 align-items-center">
                      <div class="col-auto" id="progress_text_{{ Torrent.id }}">
                        {{ Torrent.progress }}%
                      </div>
                      <div class="col">
                        <div class="progress progress-sm">
                          <div class="progress-bar" id="progress_{{ Torrent.id }}" style="width: {{ Torrent.progress }}%" role="progressbar" aria-valuenow="{{ Torrent.progress }}" aria-valuemin="0" aria-valuemax="100">
                            <span class="visually-hidden"></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-auto">
                  <div class="dropdown">
                    <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
                      <!-- Download SVG icon from http://tabler-icons.io/i/dots-vertical -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="1" /><circle cx="12" cy="19" r="1" /><circle cx="12" cy="5" r="1" /></svg>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                      <a href="javascript:start_pt_download('{{ Torrent.id }}')" id="start_btn_{{ Torrent.id }}" class="dropdown-item" style="{% if Torrent.state == 'Downloading' %}display:none{% endif %}">开始</a>
                      <a href="javascript:stop_pt_download('{{ Torrent.id }}')" id="stop_btn_{{ Torrent.id }}" class="dropdown-item" style="{% if Torrent.state == 'Stoped' %}display:none{% endif %}">暂停</a>
                      <a href="javascript:remove_pt_download('{{ Torrent.id }}')" class="dropdown-item text-danger">删除</a>
                    </div>
                  </div>
                </div>
                <input type="hidden" class="download_ids" id="id_{{ Torrent.id }}" value="{{ Torrent.id }}">
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="page-wrapper">
    <div class="container-xl">
    </div>
    <div class="page-body">
      <div class="container-xl d-flex flex-column justify-content-center">
        <div class="empty">
          <div class="empty-img"><img src="./static/img/quitting_time.svg" height="128"  alt="">
          </div>
          <p class="empty-title">没有记录</p>
          <p class="empty-subtitle text-muted">
            当前没有正在下载的项目...
          </p>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  <script type="text/javascript">
    // 下载控制
    function start_pt_download(id){
        var cmd = "pt_start";
        var param = {"id": id};
        ajax_post(cmd, param, function(ret){
          get_torrent_info(ret.id)
        });
    }
    function stop_pt_download(id){
        var cmd = "pt_stop";
        var param = {"id": id};
        ajax_post(cmd, param, function(ret){
          get_torrent_info(ret.id)
        });
    }
    function remove_pt_download(id){
        var cmd = "pt_remove";
        var param = {"id": id};
        ajax_post(cmd, param, function(ret){
          navmenu('download');
        });
    }

    //更新所有种子页面信息
    function get_all_torrents_info(){
        var cmd = "pt_info";
        var ids = [];
        var i = 0;
        $(".download_ids").each(function(){
          ids[i] = $(this).val();
          i++;
        });
        if(ids.length == 0){
          return;
        }
        var param = {"ids": ids};
        ajax_post(cmd, param, function(ret){
          if(ret.retcode == "0"){
            for (var i=0;i<ret.torrents.length;i++)
            {
              update_torrent_ui(ret.torrents[i]);
            }
            setTimeout("get_all_torrents_info()", 2000);
          }
        });
    }

    //更新一个种子页面信息
    function get_torrent_info(id){
      var cmd = "pt_info";
        var param = {"ids": id};
        ajax_post(cmd, param, function(ret){
          if(ret.retcode == "0"){
            for (var i=0;i<ret.torrents.length;i++)
            {
              update_torrent_ui(ret.torrents[i]);
            }
          }
        });
    }


    //更新单个种子的页面信息
    function update_torrent_ui(info){
        $("#speed_text_" + info.id).text(info.speed);
        $("#progress_text_" + info.id).text(info.progress + "%");
        $("#progress_" + info.id).attr("style", "width: " + info.progress + "%");
        $("#progress_" + info.id).attr("aria-valuenow", info.progress);
        if(info.state == "Stoped"){
          $("#start_btn_" + info.id).show()
          $("#stop_btn_" + info.id).hide()
        }else{
          $("#start_btn_" + info.id).hide()
          $("#stop_btn_" + info.id).show()
        }
    }

    //事件
    setTimeout("get_all_torrents_info()", 2000);

  </script>